<template>
	<view class="container">
		<view class="back_ico" :style="{top: `${statusBarHeight}px`}" @click="backLastPage"><uni-icons type="left" size="30"></uni-icons></view>
		<image src="" class="bac"></image>
		<view class="userCard">
			<view class="top">
				<img :src="transformAvatar(userInfo.avatarUrl || null)"></img>
			</view>
			<view class="bottom">
				<view class="name">{{userInfo.nickName}}</view>
			</view>
		</view>
		<view class="switchList">
			<view class="switch">
				<span :class="{'active':currentView == 'A'}" @click="currentView = 'A'">博客</span>
				<span :class="{'active':currentView == 'B'}" @click="currentView = 'B'">专栏</span>
			</view>
			<view class="content">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				refresher-enabled="true"
				@refresherrefresh="onRefresherrefresh" :refresher-triggered="refresherTriggered">
					<uni-list border-full v-if="currentView == 'A'">
						<uni-list-item :title="item.title+''" :note="item.authorName+''" ellipsis="2"
						v-for="(item,index) in list1" :key="index"
						:to="'/pages/photo/detail/detail?id='+ item.id + '&isRandom=true'"/>
					</uni-list>	
				    <uni-list border-full v-if="currentView == 'B'">
				    	<uni-list-item :title="item+''" :note="index+''" ellipsis="2"
				    	v-for="(item,index) in list2" :key="index"
				    	:to="'/pages/photo/detail/detail?id='+ item.id + '&isRandom=true'"/>
				    </uni-list>	
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../../utils/request.js"
	export default {
		data() {
			return {
				refresherTriggered: false,//当前下拉刷新状态
				statusBarHeight: 0,//状态栏高度
				currentView: "A",//switchList页面内容，A代表博客，B代表专栏
				id: '',//用户id
				userInfo: {
					nickName: "陶杰",//昵称
					
				},//用户信息
				list1: [],//列表内容1
				list2: [],//列表内容2
				scrollTop: 0,//竖向滚动条位置
			};
		},
		methods: {
			//转换图片链接
			transformAvatar(v) {
				if(v == null) return '/static/images/user/ico.png'
				return v.replaceAll('?','%3F').replaceAll('=','%3D')
			},
			//关注按钮点击
			onClick() {
				this.checked = !this.checked
				//发送请求，
			},
			//回到上一页
			backLastPage() {
				uni.navigateBack({})
			},
			//自定义下拉刷新被触发
			onRefresherrefresh() {
				this.refresherTriggered = 'restore'
				console.log(this.scrollTop,this.refresherTriggered)
				//重新获取数据
				if(this.currentView == 'A')
				    this.getList1Data()
				else 
				    this.getList2Data()
			},
			getUserInfoData() {
				//发送请求，根据id获取目标用户信息
				request({
					url: '/userInfo/getByUserId',
					data: {
						userId: this.id
					}
				}).then(res => {
					uni.hideLoading()
					this.userInfo = res.data
					console.log(res)
				})
			},
			getList1Data() {
				//发送请求，根据id获取目标用户信息现相关联文章列表
				request({
					url: '/articles/getListByUserId',
					data: {
						userId: this.id
					}
				}).then(res => {
					this.refresherTriggered = false
					console.log(this.scrollTop,this.refresherTriggered)
					this.list1 = res.data
					console.log(res)
				})
			},
			getList2Data() {
				
			}
		},
		onLoad(event) {
		  //获取用户id，通常 id 来自上一个页面
		  if (event.id) {
		    this.id = event.id
		  }
		},
		onReady() {
		  uni.showLoading({})
		  //获取状态栏高度
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		  // 开始加载数据，
		  if (this.id) { // ID 不为空，则发起查询	  
		     //获取数据
			 this.getUserInfoData()
			 this.getList1Data()
			 this.getList2Data()
		  } else {
		    uni.showToast({
		      icon: 'none',
		      title: 'id 不能为空'
		    })
		  }
		},
	}
</script>

<style lang="scss" scoped>
body {
	
}
	
.container {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	flex-direction: column;
	background-color: #fff;
	
	.back_ico {
		position: absolute;
		z-index: 1;
		left: 20rpx;
	}
}

.bac {
	width: 100%;
	height: 170px;
}

.userCard {
	background-color: #fff;
	width: 90%;
	padding: 20rpx;
	border-radius: 10rpx;
	margin: 0 auto;
	transform: translateY(-50%);
	box-shadow: 0 1px 2px hsla(0,0%,7%,.1), 0 0 0 1px hsla(0,0%,7%,.1);
}
	
.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 0 40rpx;
	
	img {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}
	
}

.bottom {
	padding: 0 40rpx;
	
	.name {
		width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.switchList {
	padding: 0 10rpx;
	flex-grow: 1;
	transform: translateY(-20px);
	overflow-y: scroll;
	
	.switch {
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		span {
			padding: 10rpx;
		}
		
		.active {
			border-bottom: 1px solid black;
		}
	}
	
	.content {
		
		
	}
}


</style>
